<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">            
            function getPlayerName(){
                var player = prompt("Player name", "");
                if (player!=null && player!="")
                {
                    document.getElementById("player_name").textContent = player;
                    //alert("are you ready" + player + "?");
                    start(player);
                }else{
                    alert("input name");
                }
                
            }
            function start(playerName){    
                
                var player = {
                    name:" ",
                    score:0
                }
                player.name = playerName;
                
                var board = document.getElementById("snake_board");
                board.focus();
                
                var TOP = 38;
                var LEFT = 37;
                var RIGHT = 39;
                var BOTTOM = 40;
                                                
                var keys = {
                    pressed_key : false,
                    current_pressed : "KEY_NAME"
                };
                
                var snake_keydown = function(p){
                    //console.log(p);
                    switch(p.which){
                        case TOP : 
                            keys.pressed_key = true;
                            keys.current_pressed = "TOP";
                            break;
                        case LEFT : 
                            keys.pressed_key = true;
                            keys.current_pressed = "LEFT";
                            break;
                        case RIGHT : 
                            keys.pressed_key = true;
                            keys.current_pressed = "RIGHT";
                            break;
                        case BOTTOM : 
                            keys.pressed_key = true;
                            keys.current_pressed = "BOTTOM";
                            break;                       
                    }
                };
                var snake_keyup = function(p){
                    //console.log(p);
                    switch(p.which){
                        case TOP : 
                            keys.pressed_key = false;
                            keys.current_pressed = "TOP";
                            break;
                        case LEFT : 
                            keys.pressed_key = false;
                            keys.current_pressed = "LEFT";
                            break;
                        case RIGHT : 
                            keys.pressed_key = false;
                            keys.current_pressed = "RIGHT";
                            break;
                        case BOTTOM : 
                            keys.pressed_key = false;
                            keys.current_pressed = "BOTTOM"; 
                            break;
                        
                    }
                };
                
                board.addEventListener("keydown", snake_keydown, false);
                board.addEventListener("keyup", snake_keyup, false);                
                var snake_graphics = board.getContext("2d");                
                
                var food = {
                    x:Math.round(Math.floor(Math.random() * 150 / 2)* 2) ,
                    y:Math.round(Math.floor(Math.random() * 150 / 2)* 2) ,
                    width:5,
                    height:5,
                    special:"SPECIAL"
                }                                   
                
                
                
                var snake = {
                    snake_len:10,
                    x:0,
                    y:0,
                    width:5,
                    height:5,
                    speed:2,
                    stop:0,
                    game_over: function(){
                        this.speed = this.stop;
                    },
                    left: function(){
                        this.x -= this.speed; 
                    },
                    right:function(){
                        this.x+= this.speed;  
                    },
                    top:function(){
                        this.y-=this.speed;
                    },
                    bottom:function(){
                        this.y+=this.speed;
                    }                    
                }      
                var setSnakeBoard = function(){
                    snake_graphics.fillStyle = "#FFFFFF";
                    snake_graphics.fillRect(0, 0, 350, 150);
                }
                var setSnakeObject = function(){
                    snake_graphics.fillStyle = "#FF0000";
                    snake_graphics.fillRect(snake.x, snake.y, snake.width, snake.height);
                }
                var setFood = function(){
                    setInterval(function(){
                        snake_graphics.fillStyle = "#000000";                        
                        snake_graphics.fillRect(food.x,food.y,food.width,food.height);                       
                    },50) 
                }
                interval=setInterval(function(){                    
                    setSnakeBoard();
                    setSnakeObject();
                    setFood();                                                                                                                                            
                    if(keys.pressed_key && keys.current_pressed == "TOP"){ 
                        if(snake.y != -1){
                            if(snake.y != food.y || snake.x != food.x){                                    
                                snake.top();
                                snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height + snake.snake_len);                                                                          
                            }
                            else{
                                food.x = 40;
                                food.y = 40;
                                food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                snake_graphics.fillStyle = "#000000";
                                
                                if((food.x % 2 == 0 && food.y % 2 == 0) && (food.x <= 340 && food.y <= 150)){
                                    //snake.speed += 2;
                                    player.score += 1;
                                    document.getElementById("player_score").textContent = player.score;
                                    snake_graphics.fillRect(food.x,food.y,food.width,food.height);   
                                    snake.snake_len += 3;
                                    snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height + snake.snake_len);
                                }else{
                                    food.x =Math.floor(Math.random() * 340 / 2)* 2;
                                    food.y =Math.floor(Math.random() * 150 / 2)* 2;
                                }                                    
                                console.log("Gotta cha !"+ food.x +" " +food.y);
                                snake.top();
                            }
                        }else{
                            snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height); 
                            snake.game_over();
                        }                                                                                                         
                    }else{
                        if(!keys.pressed_key && keys.current_pressed == "TOP"){ 
                            if(snake.y != -1){                                
                                if(snake.y != food.y || snake.x != food.x){                                    
                                    snake.top();
                                    snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height + snake.snake_len);                                                                          
                                }
                                else{
                                    food.x = 40;
                                    food.y = 40;
                                    console.log(Math.random());
                                    food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                    food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                    snake_graphics.fillStyle = "#000000";
                                   
                                    if((food.x % 2 == 0 && food.y % 2 == 0) && (food.x <= 340 && food.y <= 150)){
                                        //snake.speed += 2;
                                        snake.snake_len += 2; 
                                        player.score += 1;
                                        document.getElementById("player_score").textContent = player.score;
                                        snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height + snake.snake_len);                                                                          
                                        snake_graphics.fillRect(food.x,food.y,food.width,food.height);                                        
                                    }else{
                                        food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                        food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                    }                                   
                                    console.log("Gotta !"+ food.x +" " +food.y);
                                    snake.top();
                                }
                            }else{
                                snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height); 
                                snake.game_over();
                            }                                                                                                        
                        }
                    }
                    if(keys.pressed_key && keys.current_pressed == "LEFT"){
                        if(snake.x != 0){
                            if(snake.y != food.y || snake.x != food.x){                                    
                                snake.left();
                                snake_graphics.fillRect(snake.x, snake.y, snake.width + snake.snake_len , snake.height );                                                                          
                            }
                            else{
                                food.x = 40;
                                food.y = 40;
                                console.log(Math.random());
                                food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                snake_graphics.fillStyle = "#000000";
                                   
                                if((food.x % 2 == 0 && food.y % 2 == 0) && (food.x <= 340 && food.y <= 150)){
                                    //snake.speed += 2;
                                    snake.snake_len += 2; 
                                    player.score += 1;
                                    document.getElementById("player_score").textContent = player.score;
                                    snake_graphics.fillRect(snake.x, snake.y, snake.width + snake.snake_len , snake.height);                                                                          
                                    snake_graphics.fillRect(food.x,food.y,food.width,food.height);                                        
                                }else{
                                    food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                    food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                }                                   
                                console.log("Gotta !"+ food.x +" " +food.y);
                                snake.left();
                            }   
                        }else{
                            snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height); 
                            snake.game_over();
                        }                                                 
                    }else{
                        if(!keys.pressed_key && keys.current_pressed == "LEFT"){
                            if(snake.x != 0){
                                if(snake.y != food.y || snake.x != food.x){                                    
                                    snake.left();
                                    snake_graphics.fillRect(snake.x, snake.y, snake.width + snake.snake_len , snake.height );                                                                          
                                }
                                else{
                                    food.x = 40;
                                    food.y = 40;
                                    console.log(Math.random());
                                    food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                    food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                    snake_graphics.fillStyle = "#000000";
                                   
                                    if((food.x % 2 == 0 && food.y % 2 == 0) && (food.x <= 340 && food.y <= 150)){
                                        //snake.speed += 2;
                                        snake.snake_len += 2; 
                                        player.score += 1;
                                        document.getElementById("player_score").textContent = player.score;
                                        snake_graphics.fillRect(snake.x, snake.y, snake.width + snake.snake_len , snake.height);                                                                          
                                        snake_graphics.fillRect(food.x,food.y,food.width,food.height);                                        
                                    }else{
                                        food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                        food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                    }                                   
                                    console.log("Gotta !"+ food.x +" " +food.y);
                                    snake.left();
                                }      
                            }else{
                                snake_graphics.fillRect(snake.x, snake.y, snake.width, snake.height);
                                snake.game_over();
                            }  
                        }
                    }
                    if(keys.pressed_key && keys.current_pressed == "BOTTOM"){
                        if( snake.y != 145){
                            if(snake.y != food.y || snake.x != food.x){                                    
                                snake.bottom();
                                snake_graphics.fillRect(snake.x, snake.y, snake.width  , snake.height + snake.snake_len);                                                                          
                            }
                            else{
                                food.x = 40;
                                food.y = 40;
                                console.log(Math.random());
                                food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                snake_graphics.fillStyle = "#000000";
                                   
                                if((food.x % 2 == 0 && food.y % 2 == 0) && (food.x <= 340 && food.y <= 150)){
                                    //snake.speed += 2;
                                    snake.snake_len += 2; 
                                    player.score += 1;
                                    document.getElementById("player_score").textContent = player.score;
                                    snake_graphics.fillRect(snake.x, snake.y, snake.width  , snake.height + snake.snake_len);                                                                          
                                    snake_graphics.fillRect(food.x,food.y,food.width,food.height);                                        
                                }else{
                                    food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                    food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                }                                   
                                console.log("Gotta !"+ food.x +" " +food.y);
                                snake.bottom();
                            }    
                        } else{
                            snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height); 
                            snake.game_over();
                        }                                               
                    }else{
                        if(!keys.pressed_key && keys.current_pressed == "BOTTOM"){
                            if( snake.y != 145){
                                if(snake.y != food.y || snake.x != food.x){                                    
                                    snake.bottom();
                                    snake_graphics.fillRect(snake.x, snake.y, snake.width  , snake.height + snake.snake_len);                                                                          
                                }
                                else{
                                    food.x = 40;
                                    food.y = 40;
                                    console.log(Math.random());
                                    food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                    food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                    snake_graphics.fillStyle = "#000000";
                                   
                                    if((food.x % 2 == 0 && food.y % 2 == 0) && (food.x <= 340 && food.y <= 150)){
                                        //snake.speed += 2;
                                        snake.snake_len += 2; 
                                        player.score += 1;
                                        document.getElementById("player_score").textContent = player.score;
                                        snake_graphics.fillRect(snake.x, snake.y, snake.width  , snake.height + snake.snake_len);                                                                          
                                        snake_graphics.fillRect(food.x,food.y,food.width,food.height);                                        
                                    }else{
                                        food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                        food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                    }                                   
                                    console.log("Gotta !"+ food.x +" " +food.y);
                                    snake.bottom();
                                }    
                            }else{
                                snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height);
                                snake.game_over();
                            } 
                        }
                    }
                    if(keys.pressed_key && keys.current_pressed == "RIGHT"){
                        if(snake.x != 350){
                            if(snake.y != food.y || snake.x != food.x){                                    
                                snake.right();
                                snake_graphics.fillRect(snake.x, snake.y, snake.width + snake.snake_len , snake.height);                                                                          
                            }
                            else{
                                food.x = 40;
                                food.y = 40;
                                console.log(Math.random());
                                food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                snake_graphics.fillStyle = "#000000";
                                   
                                if((food.x % 2 == 0 && food.y % 2 == 0) && (food.x <= 340 && food.y <= 150)){
                                    //snake.speed += 2;
                                    snake.snake_len += 2; 
                                    player.score += 1;
                                    document.getElementById("player_score").textContent = player.score;
                                    snake_graphics.fillRect(snake.x, snake.y, snake.width + snake.snake_len , snake.height);                                                                          
                                    snake_graphics.fillRect(food.x,food.y,food.width,food.height);                                        
                                }else{
                                    food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                    food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                }                                   
                                console.log("Gotta !"+ food.x +" " +food.y);
                                snake.right();
                            }                               
                        }else{
                            snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height); 
                            snake.game_over();                            
                        }                                                                    
                    }else{
                        if(!keys.pressed_key && keys.current_pressed == "RIGHT"){
                            if(snake.x != 350){
                                if(snake.y != food.y || snake.x != food.x){                                    
                                    snake.right();
                                    snake_graphics.fillRect(snake.x, snake.y, snake.width + snake.snake_len , snake.height);                                                                          
                                }
                                else{
                                    food.x = 40;
                                    food.y = 40;
                                    console.log(Math.random());
                                    food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                    food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                    snake_graphics.fillStyle = "#000000";
                                   
                                    if((food.x % 2 == 0 && food.y % 2 == 0) && (food.x <= 340 && food.y <= 150)){
                                        //snake.speed += 2;
                                        snake.snake_len += 2; 
                                        player.score += 1;
                                        document.getElementById("player_score").textContent = player.score;
                                        snake_graphics.fillRect(snake.x, snake.y, snake.width + snake.snake_len , snake.height);                                                                          
                                        snake_graphics.fillRect(food.x,food.y,food.width,food.height);                                        
                                    }else{
                                        food.x =Math.round(Math.floor(Math.random() * 340 / 2)* 2);
                                        food.y =Math.round(Math.floor(Math.random() * 150 / 2)* 2);
                                    }                                   
                                    console.log("Gotta !"+ food.x +" " +food.y);
                                    snake.right();
                                }        
                            }else{                                
                                snake_graphics.fillRect(snake.x, snake.y, snake.width , snake.height);
                                snake.game_over();
                            }                                                                    
                        }
                    } 
                   
                }, 50);
            }
        </script>
    </head>
    <body>
        <h1>This is my canvas snake</h1>
        <table>
            <tr>
                <td>
                    <canvas tabindex="1" id="snake_board" width="350" height="150">
                    </canvas>
                </td>
                <td>
                    <label id="player_name"></label>
                    <label id="player_score"></label>
                    <input type="button" onclick="getPlayerName();" value="start"/>
                </td>
            </tr>
        </table>
    </body>
</html>
